<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="https://unpkg.com/vue"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <title>兑换专区</title>
</head>
<body>
    <header>
        <h4>猜涨跌兑换专区</h4>
    </header>
    <!--内容  -->
    <section id="app">
        <div class="ge_xin pad" v-if='isHiden' >
             <div class="bai pad">
                <!--头像-->
                <div class="ges_tou">
                    <img src='img/1.png'>    
                    <h5 class="ge_name">{{huabi.username}}</h5>
                </div>
                <!--花币-->
                <div class="ges_niubi">
                    <h4 style="font-size: 1rem;">可用牛牛币：<span>{{huabi.money}}</span></h4>
                    <button class="ges_chong" @click='chong'>充值</button>
                    <button class="ges_dui" @click.stop.prevent='jilu'>兑换记录</button>
                </div>
            </div>   
        </div>   
           <!-- 兑换内容 -->
        <ul class="dhzq_d">
            <li class="dhzq-cont"  v-for="k in data_shop">
                <div class="dhzq_contImg">
                     <img :src='k.thumb' alt=""> 
                    <!-- <img src="http://118.31.79.20/statics/uploads/shopimg/20160414/52224000616243.jpg" alt=""> -->
                </div>
                <div class="dhzq_contW">
                    <p >{{k.title}}</p>
                    
                    <p style="margin-bottom: 0;">{{k.title2}}</p>
                    <div class="dui_left">
                        <h5><span>{{k.money}}</span>牛牛币</h5>
                    </div>
                    <button class="duihuan" @click.stop.prevent='dui(k.title,k.money,k.id)'>立即兑换</button>
                </div>
            </li>
        </ul> 
    </section>

    <!--底部导航  -->
    <footer>
         <a href="home.html">首页</a>   
         <a href="yiyuan.html">0元夺宝</a>  
         <a href="dhzq.html">兑换专区</a>  
         <a href="about.html">个人中心</a>  
    </footer>
</body>
<script src="js/shuju.js"></script>
</html>